import React, { Component, Fragment } from 'react';
import PropTypes from 'prop-types';
import { Card } from 'antd';
import styles from './Result.less';
import { RingLoader } from 'react-spinners';
import QueueAnim from 'rc-queue-anim';
import img_correct from '@/assets/correct_256x256.png';
import img_wrong from '@/assets/wrong_256x256.png';

class Result extends Component {
  render() {
    const {
      result,
      loading,
    } = this.props;

    console.log({
      result,
    });

    return (
      <Fragment>
        <Card title={<div style={{ textAlign: 'center' }}>决策结果</div>} className={styles.container}>
          {loading && (
            <QueueAnim
              type={['bottom', 'top']}
              duration={[500, 5000]}
              ease={['easeOutBack', 'easeInOutCirc']}
            >
              <div key="0" className={styles.loadingWrapper}>
                <RingLoader color="#1890ff" size={80} margin="0 auto" />
                <div className={styles.loadingWord}>决策计算中</div>
              </div>
            </QueueAnim>
          )}
          {!loading && (
            <QueueAnim
              type={['bottom', 'top']}
              duration={[500, 2000]}
              ease={['easeOutBack', 'easeInOutCirc']}
            >
              <div key="0" className="text-center">
                <img className={styles.resultImg} src={result === 0 ? img_correct : img_wrong} alt={result === 0 ? "可行" : "不可行"} />
              </div>
            </QueueAnim>
          )}
        </Card>
      </Fragment>
    );
  }
}

Result.propTypes = {
  result: PropTypes.number.isRequired
};

export default Result;
